<template>
  <div class="asideBarItem-container">
    <!-- 如果hasOwnProperty监测有children 就循环递归展示-->
    <el-submenu :index="router.path" v-if="hasChildrenAndShow(router)">
      <template slot="title">
        <i :class="router.icon"></i>
        <span slot="title">{{ router.name }}</span>
      </template>
      <!--递归子孙导航-->
      <asideBarItem
        v-for="(child, childKey) in router.children"
        :key="child.path"
        :router="child"
      ></asideBarItem>
    </el-submenu>
    <!-- 如果没有 就展示一级导航 -->
    <el-menu-item
      v-else
      :key="router.path"
      :index="router.path"
      @click="saveActivePath(router.path)"
    >
      <i :class="router.icon"></i>
      <span>{{ router.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
//hasOwnProperty可以用来检测一个对象是否含有特定的自身属性
export default {
  name: "asideBarItem",
  props: {
    router: {
      type: Object,
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    // router () {
    //   return this.$router.options.routes
    // }
  },
  watch: {},
  methods: {
    hasChildrenAndShow(router) {
      if (router.hidden) {
        return false;
      }

      return router.hasOwnProperty("children");
    },
    saveActivePath(path) {
      //alert(path);
      this.$emit("setActivePath", path);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #1890ff !important;
}

/*隐藏文字*/
.el-menu--collapse .asideBarItem-container span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse
  .asideBarItem-container
  .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>
